<template>
  <div class="container">
    <BasicTable @register="registerTable" class="table-container">
      <template #headerTop>
        <Button type="primary" @click="handleAdd(CustomModalTypeEnum.Add)">新增</Button>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                tooltip: '编辑',
                onClick: () => handleAdd(CustomModalTypeEnum.Edit, record),
              },

              {
                label: `${dataStatusOprationEnumText[record.disabled]}`,
                tooltip: `${dataStatusOprationEnumText[record.disabled]}`,
                onClick: () => handleDisabled(record),
              },
              {
                label: '删除',
                tooltip: '删除',
                popConfirm: {
                  title: '确定删除这条数据吗？',
                  confirm: () => handleDel(record.id),
                },
              },
            ]"
        /></template>
      </template>
      <template #disabled="{ record }">
        <Badge
          v-if="record.disabled === DataStatusEnum.Normal"
          status="success"
          :text="dataStatusEnumText[DataStatusEnum.Normal]"
        />
        <Badge v-else status="default" :text="dataStatusEnumText[DataStatusEnum.Disable]" />
      </template>
    </BasicTable>
    <AddedModal @register="register" @reload="reload" />
  </div>
</template>
<script lang="ts" setup>
  /** 毕业专业 */
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getSaasColumns } from './tableData';
  import { Button, Badge } from 'ant-design-vue';
  import {
    getGraduationMajorList,
    graduationMajorEnable,
    delGraduationMajor
  } from '@/api/platform/fieldValueManage/graduationMajor';
  import {
    CustomModalTypeEnum,
    DataStatusEnum,
    dataStatusEnumText,
    dataStatusOprationEnumText,
  } from '@/enums/publicEnum';
  import AddedModal from './modal/added.vue';
  import { useModal } from '@/components/Modal';
  import { GraduationMajor } from '@/api/platform/fieldValueManage/graduationMajor/type';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const [registerTable, { reload }] = useTable({
    api: getGraduationMajorList,
    columns: getSaasColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    actionColumn: {
      width: 120,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
    },
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: 'keyword',
          label: '关键词',
          component: 'Input',
          componentProps: {
            placeholder: '专业搜索',
          },
          colProps: {
            span: 6,
          },
        },
        {
          field: 'disabled',
          label: '状态',
          component: 'Select',
          colProps: {
            span: 5,
          },
          componentProps: {
            options: [
              { label: '全部', value: '' },
              { label: dataStatusEnumText[DataStatusEnum.Normal], value: DataStatusEnum.Normal },
              { label: dataStatusEnumText[DataStatusEnum.Disable], value: DataStatusEnum.Disable },
            ],
          },
        },
      ],
    },
  });

  const [register, { openModal }] = useModal();

  function handleAdd(type: CustomModalTypeEnum, row?: Partial<GraduationMajor>) {
    openModal(true, {
      type,
      row,
    });
  }

  const handleDisabled = async (row: GraduationMajor) => {
    let disabled = DataStatusEnum.Normal;
    let disabledMsg = '启用成功！';
    if (row.disabled === DataStatusEnum.Normal) {
      disabled = DataStatusEnum.Disable;
      disabledMsg = '禁用成功！';
    } else {
      disabled = DataStatusEnum.Normal;
      disabledMsg = '启用成功！';
    }
    await graduationMajorEnable({ id: row.id, disabled });
    createMessage.success(disabledMsg);
    reload();
  };

  const handleDel = async (id) => {
    await delGraduationMajor(id);
    reload();
    createMessage.success('删除成功！');
  };
</script>

<style lang="less" scoped></style>
